<style>
.image-container {
    width: 100%;
    position: absolute;
}
.rotate {
    width: 100%;
    animation: spin 3s linear infinite;
}
 
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.movedown {
    width: 100%;
	animation: float 2s ease-in-out infinite;
}
@keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(6rem);
            }
            100% {
                transform: translateY(0px);
            }
}
.rotate2,.movedown2 {
    width: 100%;
}
</style>
<div ng-if="pagedata.showtexiao" style="background:none;height:100%;width:100%;position:relative">
		<div ng-if="!pagedata.stoptexiao" class="c" style="width:100%;background:none;">
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle1.png" class="rotate">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle2.png" class="rotate" style="padding:0.5rem;">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle3.png" class="rotate" style="padding:1.5rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle4.png" class="rotate" style="padding:3rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle5.png" class="rotate" style="padding:4.5rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_scan.png" class="movedown" style="padding:4rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_surface.png" class="movedown2" style="padding:4rem">
				</div>
		</div>
		<div ng-if="pagedata.stoptexiao" class="c" style="width:100%;background:none;">
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle1.png" class="rotate2">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle2.png" class="rotate2" style="padding:0.5rem;">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle3.png" class="rotate2" style="padding:1.5rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle4.png" class="rotate2" style="padding:3rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_circle5.png" class="rotate2" style="padding:4.5rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_scan.png" class="movedown2" style="padding:4rem">
				</div>
				<div class="image-container">
					<img src="../addons/jy_aiagent/resource/images/aitexiao_surface.png" class="movedown2" style="padding:4rem">
				</div>
		</div>
</div>